<%--
  Created by IntelliJ IDEA.
  User: zhouz
  Date: 2023/12/4
  Time: 15:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--输入名字，当失去焦点时判断：name值为zhangsan则认为则显示”此用户已占用”，输入其他名字则显示“此用户可以使用”--%>
请输入名称：<input type="text" name="name" id="name"><span id="info"></span>


<script type="text/javascript">

    let nameInput = document.getElementById("name");

    nameInput.onblur = function () {
        // 1. 创建XMLHttpRequest对象
        let xmlHttp = new XMLHttpRequest();

        /**
         * 2. 调用open函数
         * 第一个参数：提交方式：GET | POST
         * 第二个参数：url地址
         * 第三个参数：true:异步，false:同步
         *
         */
        let url = "${pageContext.request.contextPath}/ajax/exists?name=" + nameInput.value;
        xmlHttp.open("GET", url, true);

        // 3. 注册回调
        xmlHttp.onreadystatechange = function (resp) {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                let infoSpan = document.getElementById("info");
                // console.log(resp)
                infoSpan.innerHTML = resp.srcElement.responseText;
            }
        };

        // 4. 真正发送请求。当请求方式是GET方式
        xmlHttp.send(null);
    };


</script>

</body>
</html>
